import React, { Component, useContext, useState, useEffect, useRef } from 'react';
import { Table, Input, Button, Popconfirm, Form } from 'antd';
import ExportJsonExcel from 'js-export-excel';
import { Container } from './style'
import 'antd/dist/antd.css';

const EditableContext = React.createContext();


const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

const EditableCell = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing] = useState(false);
  const inputRef = useRef();
  const form = useContext(EditableContext);
  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  }, [editing]);



  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{
          margin: 0,
        }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `${title} is required.`,
          },
        ]}
      >
      </Form.Item>
    ) : (
      <div
        className="editable-cell-value-wrap"
        style={{
          paddingRight: 24,
        }}
      >
        {children}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};


class index extends Component {
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: '序号',
        dataIndex: 'SN',
        editable: true,
      },
      {
        title: '物品名称',
        dataIndex: 'articles',
      },
      {
        title: '物品编码',
        dataIndex: 'articlesNum',
      },
      {
        title: '品牌',
        dataIndex: 'brand',
      },
      {
        title: '物品分类',
        dataIndex: 'category',
      },
      {
        title: '规格/型号',
        dataIndex: 'model',
      },
      {
        title: '单位',
        dataIndex: 'unit',
      },
      {
        title: '所属仓库',
        dataIndex: 'warehouse',
      },
      {
        title: '当前库存',
        dataIndex: 'inventory',
      },
      {
        title: '状态',
        dataIndex: 'state',
      }
    ];
    this.state = {
      dataSource: [
        {
          SN: 1,
          articles: '黑色签字笔',
          articlesNum: 'oi29h238',
          brand: '得力',
          category:'办公用品',
          model:"gel16 0.4/0.5",
          unit:"只",
          warehouse:"本部高中-行政楼1号仓库",
          inventory:300,
          state:"正常"

        }
        
      ],
      count: 1,
    };
  }

  
  handleAdd = () => {
   
  };
  
  render() {
    const { dataSource } = this.state;
    const components = {
      body: {
        row: EditableRow,
        cell: EditableCell,
      },
    };
    const columns = this.columns.map((col) => {
      console.log(col.editable)
      if (!col.editable) {
        return col;
      }

      return {
        ...col,
        onCell: (record) => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
        }),
      };
    });

    return (
      <Container>
         <div>
        <Button
          onClick={this.downloadExcel}
          type="primary"
          style={{
            marginBottom: 16,
          }}
        >
          导出Excel
        </Button>
        <Table
          components={components}
          rowClassName={() => 'editable-row'}
          bordered
          dataSource={dataSource}
          columns={columns}
        />
      </div>
      </Container>
    );
  }
  // 导出excel表格
  downloadExcel = () => {
    const data = this.state.dataSource ? this.state.dataSource : '';//表格数据
      var option={};
      let dataTable = [];
      if (data) {
        for (let i in data) {
          if(data){
            let obj = {
              '序号': data[i].SN,
              '物品名称': data[i].articles,
              '物品编码': data[i].articlesNum,
              '物品分类': data[i].category,
              '品牌': data[i].brand,
              '规格/型号': data[i].model,
              '单位': data[i].unit,
              '所属仓库': data[i].warehouse,
              '当前库存': data[i].inventory,
              '状态': data[i].state,

            }
            dataTable.push(obj);
          }
        }
      }
      option.fileName = '盘点数据'
      option.datas=[
        {
          sheetData:dataTable,
          sheetName:'sheet',
          sheetFilter:['序号','物品名称','物品编码','物品分类','品牌','规格/型号','单位','所属仓库','当前库存','状态',],
          sheetHeader:['序号','物品名称','物品编码','物品分类','品牌','规格/型号','单位','所属仓库','当前库存','状态',],
        }
      ];
     
      var toExcel = new ExportJsonExcel(option); 
      toExcel.saveExcel();        
  }



}

export default index;
